<template>
 <section class="msite">
  <!--首页头部-->
  <Header :title=" address.name">
      <router-link class="header_search" slot="left" to="/search" >
            <i class="iconfont icon-sousuo"></i>
      </router-link>
      <router-link class="header_login" slot="right" :to="userInfo._id ? '/userinfo': '/login'">
        <span class="header_login_text" v-if="!userInfo._id">
          登录|注册
        </span>
          <span class="header_login_text" v-else>
           <i class="iconfont icon-person"></i>
        </span>
      </router-link>
  </Header>
  <!--首页导航-->
  <nav class="msite_nav">
   <div class="swiper-container"  v-if="categorysArr.length">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(cas,index) in categorysArr" :key="index">
       <a href="javascript:" class="link_to_food" v-for="(ca,index) in cas" :key="index">
        <div class="food_container">
         <img :src="baseImageUrl+ca.image_url" alt="">
        </div>
        <span>{{ca.title}}</span>
       </a  >
      </div>
    </div>
    <div class="swiper-pagination"></div>
   </div>
   <img src="./images/msite_back.svg"  v-else alt="加载失败">

  </nav>
  <!--首页附近商家-->
  <div class="msite_shop_list">
   <div class="shop_header">
    <i class="iconfont icon-xuanxiang"></i>
    <span class="shop_header_title">附近商家</span>
   </div>
  </div>
     <div>
         <ShopList></ShopList>
     </div>
 </section>
</template>

<script>
 import Header from '../../components/Header'
 import {mapState} from 'vuex'
 import ShopList from '../../components/ShopList/ShopList'
 import Swiper from 'swiper'
 import 'swiper/css/swiper.min.css'
 export default {
        name: "Msite",
        components:{
         Header,
         ShopList
        },
        data() {
            return {
             baseImageUrl: 'https://fuss10.elemecdn.com'
            };
        },
        computed: {
         ...mapState(['address','categorys','userInfo']),
         categorysArr () {
          const {categorys} = this;
          // 准备空的2维数组
          const arr = [];
          // 准备一个小数组(最大长度为8)
          let minArr = [];
          // 遍历categorys
          for (let i = 0; i <categorys.length ; i++) {
               if (minArr.length===8){
                  minArr=[]
               }
           if (minArr.length===0){
            arr.push(minArr)
           }
               minArr.push(categorys[i])
          }

          return arr
         }
        },
        methods: {
        },
        created() {
        },
        mounted() {
         this.$store.dispatch('getAddress');
         this.$store.dispatch('getCategorys');
        },
        watch:{
         categorys (){
          this.$nextTick(() => {// 一旦完成界面更新, 立即调用(此条语句要写在数据更新之后)
           // 创建一个Swiper实例对象, 来实现轮播
              new Swiper('.swiper-container', {
            loop: true, // 可以循环轮播
            // 如果需要分页器
            pagination: {
             el: '.swiper-pagination',
            },
           });
          })
          }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 @import "../../common/stylus/mixins.styl"
 .msite  //首页
  width 100%
  .msite_nav
   bottom-border-1px(#e4e4e4)
   margin-top 45px
   height 200px
   background #fff

   .swiper-container
    width 100%
    height 100%
    .swiper-wrapper
     width 100%
     height 100%
     .swiper-slide
      display flex
      justify-content center
      align-items flex-start
      flex-wrap wrap
      .link_to_food
       width 25%
       .food_container
        display block
        width 100%
        text-align center
        padding-bottom 10px
        font-size 0
        img
         display inline-block
         width 50px
         height 50px
       span
        display block
        width 100%
        text-align center
        font-size 13px
        color #666
    .swiper-pagination
     >span.swiper-pagination-bullet-active
      background darkorange
  .msite_shop_list
   top-border-1px(#e4e4e4) bottom-border-1px(#e4e4e4)
   margin-top 10px
   background #fff
   .shop_header
    padding 10px 10px 0
    .shop_icon
     margin-left 5px
     color #999
    .shop_header_title
     color #999
     font-size 14px
     line-height 20px

</style>
